<!DOCTYPE html>

<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>指令</title>
    </head>
    <body>

        <h3>指令: v-if / v-else-if / v-else </h3>

        <div id="root">
            <input type="radio" v-model="gender" value="male" id="maleGender"> 
            <label for="maleGender">靓仔</label>
            <input type="radio" v-model="gender" value="female"> 靓妹
            <input type="radio" v-model="gender" value="secret"> 保密
            <p v-if="gender === 'male'">欢迎靓仔</p>
            <p v-else-if="gender === 'female'">欢迎靓妹</p>
            <p v-else>欢迎</p>
        </div>

        <script src="vue.global.js"></script>

        <script>
            const app = Vue.createApp({
                data(){
                    return {
                        gender: 'secret'
                    }
                }
            });
            const instance = app.mount('#root');
            console.log(instance);
        </script>
        
    </body>
</html>